<template>
	<view class="wraper">
		<!-- 头部tab开始 222-->
		<!-- #ifdef APP-PLUS||H5 -->
		<u-navbar v-if="showReturn=='true'" title="" @rightClick="rightClick" :autoBack="true" bgColor="transparent">
		</u-navbar>
		<!-- #endif -->

		<swiper :indicator-dots="indicatorDots" indicator-active-color="#ea5404" indicator-color="#ADB0AE"
			:autoplay="autoplay" :interval="interval" :duration="duration" :style="{height:swiperheight+'px'}">
			<swiper-item v-for="(item, index) in background" :key="index" :data-linkUrl="item.linkUrl">
				<image style="width: 100%;height:100% ;" @error="imgerror($event, index)"
					:src='item.imageMobileCar||"@appstatic/community/banner.png"'>
					<view class="carInfoView">
						<view class="controlView">
							<view class="text1" @click="toTestDrive(item)">预约试驾</view>
							<image class="learnMore" src="@appstatic/img/my/learn_more_text.png"
								@click="carDetail(item)" />
							<view class="text1" @click="toCarReservation(item.seriesId)">立即预定</view>
						</view>
					</view>
				</image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		name: "car",
		props: {
		 

		},
		components: {
		},
		data() {
			return {
				indicatorDots: true,
				swiperheight: (app.globalData.windowHeight) + 'px',
				tabIndex: 1,
				background: [],

				interval: 5000,
				duration: 500,
				autoplay: true,
				showReturn:false
			}
		},

		onLoad(options) {
			var that = this
			if(options.showReturn!=undefined){
				that.showReturn = options.showReturn
			}
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					let clientHeight = res.windowHeight;
					let clientWidth = res.windowWidth;

					that.navigationBarHeight = res.statusBarHeight + 'px'
					that.swiperheight = clientHeight

				}
			})
			// this.getLevcCarModelList()

		},
		onShow: function(e) {
			this.getLevcCarModelList()
			this.userInfo = app.globalData.userInfo
			if (uni.getStorageSync("tabIndex") != '') {
				this.tabIndex = uni.getStorageSync("tabIndex")
				uni.setStorageSync('tabIndex', "")
			} else {
				// this.tabIndex = 1
				// this.changeTab(this.tabIndex)
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage(res) { //发送给朋友
			return {}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {}
		},
		options: {
			styleIsolation: 'shared'
		},
		methods: {
			car_onLoad: function() {
				var that = this
				uni.getSystemInfo({
					success: function(res) {
						console.log(res, 'getSystemInfo');
						let clientHeight = res.windowHeight;
						let clientWidth = res.windowWidth;
				
						that.navigationBarHeight = res.statusBarHeight + 'px'
						that.swiperheight = clientHeight
				
					}
				})

			},
			car_onShow: function() {
				this.car_onLoad()
				this.getLevcCarModelList()
				this.userInfo = app.globalData.userInfo
				if (uni.getStorageSync("tabIndex") != '') {
					this.tabIndex = uni.getStorageSync("tabIndex")
					uni.setStorageSync('tabIndex', "")
				}  

			},
			//图片加载错误默认图
			imgerror: function(e, img_index) {
				var _this = this
				if (_this.background.length > 0) {
					_this.background[img_index].image =
						"@appstatic/community/banner.png"
				}
			},


			//获取车型列表
			getLevcCarModelList: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CAR_MODEL_LIST_FORAPP;
				var params = {
					statusFlag: 0
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.background = res.data
						if (that.background.length == 1) {
							that.indicatorDots = false
						} else {
							that.indicatorDots = true
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					// uni.showToast({
					// 	title: res.errMsg,
					// 	duration: 3000,
					// 	icon: 'none'
					// })

				});
			},


			//预约试驾
			toTestDrive(item) {
				uni.navigateTo({
					url: '/module_car/pages/testDrive/testDrive?modelId=' + item.uuid + "&modelName=" + item
						.modelName
				})
			},
			//立即预定
			toCarReservation(seriesId) {
				uni.navigateTo({
					url: '/module_car/pages/carReservation/carReservation?seriesId=' + seriesId + "&from=立即预定"
				})
			},
			//了解详情
			carDetail(item) {
				uni.navigateTo({
					url: '/module_car/pages/carDetail/carDetail?carDetailJson=' + JSON.stringify(item)
				})

			}



		}
	}
</script>

<!-- <style scoped> -->
<style lang="less">
	.wraper {
		width: 100%;
		height: 100%;
		background: url("@appstatic/community/c-bg.png") no-repeat;
		background-size: 378rpx 426rpx;
		background-position: 100%;
		background-position: 100% 0;

	}

	.carInfoView {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

	.controlView {
		// margin-top: 600px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 20.34rpx;
		margin-right: 20.34rpx;
		align-items: center;
		position: absolute;
		bottom: 30px;
		width: 709.32rpx;
	}

	.learnMore {
		width: 277.3rpx;
		height: 83.04rpx;
	}


	.text1 {
		height: 64rpx;
		line-height: 64rpx;
		color: #3D3A3A;
		border-radius: 4rpx;
		font-size: 14px;
		text-align: center;
		background: rgba(237, 237, 237, 0.1);
		border: 1px solid #EA5404;
		box-sizing: border-box;
		width: 176.01rpx;
	}


	/deep/.u-popup__content {
		background-color: transparent;

	}



	uni-swiper {
		// height: calc(100vh - 44px - 44px);
	}

	/deep/ uni-swiper .uni-swiper-dot {
		width: 20rpx !important;
		height: 4rpx !important;
		border-radius: 0 !important;
	}

	/deep/ uni-swiper .uni-swiper-dot-active {
		width: 40rpx !important;
	}

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		bottom: 180rpx !important;
	}

	/* wx */
	wx-swiper .wx-swiper-dot {
		width: 20rpx !important;
		height: 4rpx !important;
		border-radius: 0 !important;
	}

	wx-swiper .wx-swiper-dot-active {
		width: 40rpx !important;
	}

	wx-swiper .wx-swiper-dots-horizontal {
		bottom: 180rpx !important;
	}
</style>
